<template>
    <div class="container" :style="theme">
        <ul class="topButtonBox">
            <li class="topButtonItem" 
                @click="selChannel('video')"
                :style="isSel === 'video'?'color: #409EFF':''"
                >视频
                <span v-show="isSel === 'video'">动态</span>
            </li>
            <li class="topButtonItem" 
                @click="selChannel('live')"
                :style="isSel === 'live'?'color: #409EFF':''"
                >直播
                <span v-show="isSel === 'live'">动态</span>
            </li>
            <li class="topButtonItem" 
                @click="selChannel('article')"
                :style="isSel === 'article'?'color: #409EFF':''"
                >专栏
                <span v-show="isSel === 'article'">动态</span>
            </li>
        </ul>
        <div class="line"  :style="getLineWidth"></div>
        <ul class="contentBox">
            <template v-if=" isSel !== 'live' || !props.data.length ">
                <li class="newContentItem">
                    <div>暂时没有新动态了哦！</div>
                </li>
                <li>
                    <el-divider class="textLine"><span>历史动态</span></el-divider>
                </li>
            </template>
            <li v-for="(item,index) in props.data" :key="index" class="contentItem">
                <trands-item :item="item"></trands-item>
            </li>
            <li>
                <el-button class="btn">查看全部动态&emsp;></el-button>
            </li>
        </ul>

    </div> 
</template>

<script lang="ts" setup>
import { ref,computed,Ref } from 'vue' 
import trandsItem from './components/trandsItem.vue'
import { getThemes,resType } from '@/hooks/theme'
import { useRouter } from 'vue-router'

interface item{
    author:{
        face:string,
        mid:number,
        name:string,    //直播内容的作者
    },
    cover:string,
    pub_time:string,    //距离现在多久了
    title:string,    
    face:string,       //直播内容的作者头像

}
interface Props{
    data:[item]
}
const props = defineProps<Props>()
const emit = defineEmits(['getTrends'])
let isSel = ref<string>('video')
const router = useRouter()
let theme: Ref<resType> = ref(getThemes(router.currentRoute.value.name as string))

function selChannel(type:string){
    isSel.value = type
    emit('getTrends',type)
}
//控制头部视频选择按钮下方的蓝色条的位置
const getLineWidth = computed(() => {
    if (isSel.value === 'video')        return { 'left':'0' }
    else if (isSel.value === 'live')    return { 'left':'33.3%' }
    else                                return { 'left':'66.6%' }
})
</script>

<style lang="scss" scoped>
@import url(../../assets/css/topPopSelBtn.scss);
$sysPopoverBackground: var(--backgroundColor);
$sysPopoverLableColor: var(--lableColor);
$sysPopoverTitleColor: var(--titleColor);
$sysPopoverHoverLableColor: var(--hoverLableColor);
.topButtonBox{
    color: $sysPopoverTitleColor;
    border-bottom: 1px solid $sysPopoverHoverLableColor;
}
ul{
    padding: 0;
    margin: 0;
    list-style: none;
}
.container{
    max-height: 500px;
    margin-bottom: 15px;
}
.contentBox{
    width: 100%;
    max-height: 450px;
    @include scrollBar;
    box-sizing: border-box;
    & li:last-child{
        height: 50px;
        @include flexRowCenter;
    }
}
.newContentItem{
    height: 100px;
    color: $sysPopoverLableColor;
    @include flexRowCenter;
}
.textLine{
    margin: 10px 0px;
    & span{
        color: $sysPopoverLableColor;
        background-color: $sysPopoverBackground;
    }
}

.contentItem{
    padding: 10px 10px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s;
    &:hover{
        background-color: $sysPopoverHoverLableColor;
    }
}
.btn{
    width: 90%;
    height: 70%;
    color: $sysPopoverLableColor;
    background-color: $sysPopoverHoverLableColor;
    border: 0;
}
.el-button:hover {
    background-color: $sysPopoverHoverLableColor;
    color: $sysPopoverTitleColor !important;
    outline: none !important;
    border: 0;
}
</style>